<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
<h2>按钮</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-assessedbadge"></em>
  <span class="title">按钮列表</span>
</div>
<div class="pz-boxbody fn-pd15">
  <h3>小按钮</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span class="pz-btn btn-small">btn-default</span>
    <span class="pz-btn btn-primary btn-small">btn-primary</span>
    <span class="pz-btn btn-info btn-small">btn-info</span>
    <span class="pz-btn btn-success btn-small">btn-success</span>
    <span class="pz-btn btn-warn btn-small">btn-warn</span>
    <span class="pz-btn btn-danger btn-small">btn-danger</span>
    <span class="pz-btn btn-inverse btn-small">btn-inverse</span>
    <span class="pz-btn btn-small btn-disabled">btn-disabled</span>
  </div>
  <h3 class="fn-mt20">中等按钮</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span class="pz-btn">btn-default</span>
    <span class="pz-btn btn-primary">btn-primary</span>
    <span class="pz-btn btn-info">btn-info</span>
    <span class="pz-btn btn-success">btn-success</span>
    <span class="pz-btn btn-warn">btn-warn</span>
    <span class="pz-btn btn-danger">btn-danger</span>
    <span class="pz-btn btn-inverse">btn-inverse</span>
    <span class="pz-btn btn-disabled">btn-disabled</span>
  </div>
  <h3 class="fn-mt20">大按钮</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span class="pz-btn btn-big">btn-default</span>
    <span class="pz-btn btn-primary btn-big">btn-primary</span>
    <span class="pz-btn btn-info btn-big">btn-info</span>
    <span class="pz-btn btn-success btn-big">btn-success</span>
    <span class="pz-btn btn-warn btn-big">btn-warn</span>
    <span class="pz-btn btn-danger btn-big">btn-danger</span>
    <span class="pz-btn btn-inverse btn-big">btn-inverse</span>
    <span class="pz-btn btn-big btn-disabled">btn-disabled</span>
  </div>
  <h3 class="fn-mt20">带选项的按钮</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <div class="pz-btn btn-small btn-hover">
      <span>左下拉</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="btnselect">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-small btn-hover">
      <span>右下拉</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="btnselect btnselect-right">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-small btn-hover">
      <span>左上拉</span>
      <em class="pz-icon icon-iccaretup"></em>
      <div class="btnselect btnselect-upleft">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-small btn-hover">
      <span>右上拉</span>
      <em class="pz-icon icon-iccaretup"></em>
      <div class="btnselect btnselect-upright">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
  </div>
  <div class="fn-mt10">
    <div class="pz-btn btn-hover">
      <span>左下拉</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="btnselect">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-hover">
      <span>右下拉</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="btnselect btnselect-right">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-hover">
      <span>左上拉</span>
      <em class="pz-icon icon-iccaretup"></em>
      <div class="btnselect btnselect-upleft">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-hover">
      <span>右上拉</span>
      <em class="pz-icon icon-iccaretup"></em>
      <div class="btnselect btnselect-upright">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
  </div>
  <div class="fn-mt10">
    <div class="pz-btn btn-big btn-hover">
      <span>左下拉</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="btnselect">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-big btn-hover">
      <span>右下拉</span>
      <em class="pz-icon icon-iccaretdown"></em>
      <div class="btnselect btnselect-right">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-big btn-hover">
      <span>左上拉</span>
      <em class="pz-icon icon-iccaretup"></em>
      <div class="btnselect btnselect-upleft">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="pz-btn btn-big btn-hover">
      <span>右上拉</span>
      <em class="pz-icon icon-iccaretup"></em>
      <div class="btnselect btnselect-upright">
        <div class="btnoption">
          <em class="arrow"></em>
          <em class="arrowbg"></em>
          <span>开启</span>
          <span>关闭</span>
        </div>
      </div>
    </div>
  </div>
  <h3 class="fn-mt20">开关按钮</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <div class="pz-switch switch-small switch-open fn-w60">
      <div class="switch-btn">开启</div>
    </div>
    <div class="pz-switch switch-small fn-w60">
      <div class="switch-btn"><p class="fn-rotate"><i class="pz-icon icon-refresh"></i></p></div>
    </div>
    <div class="pz-switch switch-small switch-close fn-w60">
      <div class="switch-btn">关闭</div>
    </div>
  </div>
  <div class="fn-mt10">
    <div class="pz-switch switch-open fn-w80">
      <div class="switch-btn">开启</div>
    </div>
    <div class="pz-switch fn-w80">
      <div class="switch-btn"><p class="fn-rotate"><i class="pz-icon icon-refresh"></i></p></div>
    </div>
    <div class="pz-switch switch-close fn-w80">
      <div class="switch-btn">关闭</div>
    </div>
  </div>
  <div class="fn-mt10">
    <div class="pz-switch switch-big switch-open fn-w120">
      <div class="switch-btn">开启</div>
    </div>
    <div class="pz-switch switch-big fn-w120">
      <div class="switch-btn"><p class="fn-rotate"><i class="pz-icon icon-refresh"></i></p></div>
    </div>
    <div class="pz-switch switch-big switch-close fn-w120">
      <div class="switch-btn">关闭</div>
    </div>
  </div>
</div>
<h2 class="fn-mt20">标签</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-discount"></em>
  <span class="title">标签列表</span>
</div>
<div class="pz-boxbody fn-pd15">
  <h3>小标签</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span class="pz-label">label-default</span>
    <span class="pz-label label-primary">label-primary</span>
    <span class="pz-label label-info">label-info</span>
    <span class="pz-label label-success">label-success</span>
    <span class="pz-label label-warn">label-warn</span>
    <span class="pz-label label-danger">label-danger</span>
    <span class="pz-label label-inverse">label-inverse</span>
    <span class="pz-label label-disabled">label-disabled</span>
  </div>
  <h3 class="fn-mt20">中标签</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span class="pz-label label-normal">label-default</span>
    <span class="pz-label label-primary label-normal">label-primary</span>
    <span class="pz-label label-info label-normal">label-info</span>
    <span class="pz-label label-success label-normal">label-success</span>
    <span class="pz-label label-warn label-normal">label-warn</span>
    <span class="pz-label label-danger label-normal">label-danger</span>
    <span class="pz-label label-inverse label-normal">label-inverse</span>
    <span class="pz-label label-disabled label-normal">label-disabled</span>
  </div>
  <h3 class="fn-mt20">大标签</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span class="pz-label label-big">label-default</span>
    <span class="pz-label label-primary label-big">label-primary</span>
    <span class="pz-label label-info label-big">label-info</span>
    <span class="pz-label label-success label-big">label-success</span>
    <span class="pz-label label-warn label-big">label-warn</span>
    <span class="pz-label label-danger label-big">label-danger</span>
    <span class="pz-label label-inverse label-big">label-inverse</span>
    <span class="pz-label label-disabled label-big">label-disabled</span>
  </div>
  <h3 class="fn-mt20">圆形标签</h3>
  <hr class="fn-mt10">
  
  <div class="fn-mt20">
    <span class="pz-label label-$small label-radius">0</span>
    <span class="pz-label label-primary label-$small label-radius">2</span>
    <span class="pz-label label-info label-$small label-radius">4</span>
    <span class="pz-label label-success label-$small label-radius">6</span>
    <span class="pz-label label-warn label-$small label-radius">8</span>
    <span class="pz-label label-danger label-$small label-radius">10</span>
    <span class="pz-label label-inverse label-$small label-radius">12</span>
    <span class="pz-label label-disabled label-$small label-radius">14</span>
  </div>
  
  <div class="fn-mt20">
    <span class="pz-label label-$normal label-radius">0</span>
    <span class="pz-label label-primary label-$normal label-radius">2</span>
    <span class="pz-label label-info label-$normal label-radius">4</span>
    <span class="pz-label label-success label-$normal label-radius">6</span>
    <span class="pz-label label-warn label-$normal label-radius">8</span>
    <span class="pz-label label-danger label-$normal label-radius">10</span>
    <span class="pz-label label-inverse label-$normal label-radius">12</span>
    <span class="pz-label label-disabled label-$normal label-radius">14</span>
  </div>
  
  <div class="fn-mt20">
    <span class="pz-label label-$big label-radius">0</span>
    <span class="pz-label label-primary label-$big label-radius">2</span>
    <span class="pz-label label-info label-$big label-radius">4</span>
    <span class="pz-label label-success label-$big label-radius">6</span>
    <span class="pz-label label-warn label-$big label-radius">8</span>
    <span class="pz-label label-danger label-$big label-radius">10</span>
    <span class="pz-label label-inverse label-$big label-radius">12</span>
    <span class="pz-label label-disabled label-$big label-radius">14</span>
  </div>
  
</div>
</body>
</html>